<template>
  <f7-page subnavbar @page:afterin="init">
    <f7-navbar :title="$t('m.mc1')" back-link=" ">
      <f7-subnavbar class="subnav-tabs">
        <van-tabs v-model="active" color="#1898ff">
          <van-tab :title="$t('m.mc2')"></van-tab>
          <van-tab :title="$t('m.mc3')"></van-tab>
        </van-tabs>
      </f7-subnavbar>
    </f7-navbar>

    <div class="content-padding" v-if="active === 0">
      <ul>
        <li v-for="(item, index) in msgList" :key="index">
          <f7-link @click="viewArticle(item)">
            <div>
              <i class="not-read-icon" v-if="item.status === '1'"></i>
              <h3 :class="{'is-read': item.status !== '1'}">{{item.title}}</h3>
            </div>
            <p>{{$moment(item.add_time *1000).format('YYYY-MM-DD HH:mm')}}</p>
          </f7-link>
        </li>
      </ul>
    </div>
    <no-content-tips v-else></no-content-tips>
  </f7-page>
</template>

<script>
  import { getArticles } from "../api/my";

  export default {
    name: "msg-center",
    data () {
      return {
        active: 0,
        msgList: []
      }
    },
    methods: {
      init() {
        getArticles({type: 2}).then(res => {
          this.msgList = res.data;
        })
      },
      viewArticle(article) {
        this.$f7router.navigate('/article-details/', {context: {id: article.id}});
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin: $padding20 0;
    ul {
      li {
        background: #fff;
        margin-bottom: 1px;
        .link {
          display: block;
          color: #000;
          padding: $padding20;
          > div {
            display: flex;
            align-items: center;
            .not-read-icon {
              display: inline-block;
              width: 10px;
              height: 10px;
              background: $dieColor;
              margin-right: 10px;
              border-radius: 50%;
            }
            h3 {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              &.is-read {
                color: $colorGrey;
              }
            }
          }
          p {
            color: $colorGrey;
            margin-top: 10px;
          }
        }
      }
    }
  }
</style>
